<template>
	<view class="page">
		<z-paging ref="paging" v-model="list" @query="queryList" :default-page-size="10">
			<view slot="top">
				<navBar title="商品列表"></navBar>
			</view>
			<view class="container">
				<view class="list flex_center" v-for="(item,index) in list" :key="index">
					<view class="select">
						<image src="/static/public/select.png" mode="aspectFill"></image>
					</view>

					<view class="item flex_center">
						<view class="image">
							<image src="/static/public/alipay.png" mode="aspectFill"></image>
						</view>
						<view class="content">
							<view class="title hidden_2">
								商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍
							</view>

							<view class="grid flex_center">
								<view class="grid-item">
									<text>售价</text>
									<view class="price">
										¥ 9.9
									</view>
								</view>

								<view class="grid-item">
									<text>售价</text>
									<view class="order-num">
										100+
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view slot="bottom">
				<view class="footer flex_r_between">
					<view class="left flex_center">
						<image src="/static/public/select.png" mode="aspectFill"></image>
						<text>全选</text>
					</view>

					<view class="right flex_center">
						<view class="flex_center">已选<text>20/100</text></view>
						<button>添加</button>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import navBar from '@/compentents/navBar/navBar.vue';
	export default {
		components: {
			navBar
		},
		data() {
			return {
				list: [],

			}
		},
		methods: {
			queryList(pageNo, pageSize) {
				var list = [];
				for (var index = 0; index < 10; index++) {
					list.push(index);
				}
				setTimeout(() => {
					this.$refs.paging.complete(list);
				}, 100)
			},
		}
	}
</script>

<style lang="less" scoped>
	.footer {
		background: #FFFFFF;
		padding: 48rpx 32rpx;
		box-shadow: 0rpx -2rpx 16rpx 0rpx rgba(0, 0, 0, 0.05), 0rpx -2rpx 16rpx 0rpx rgba(0, 0, 0, 0.05);

		.left {
			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 24rpx;
			}

			text {
				font-size: 28rpx;
				color: #131313;
				line-height: 40rpx;
			}
		}

		.right {
			view {
				font-size: 28rpx;
				color: #999999;
				margin-right: 24rpx;

				text {
					color: #FD2A53;
				}
			}


			button {
				width: 192rpx;
				height: 72rpx;
				background: #FD2A53;
				border-radius: 16rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 72rpx;
			}
		}
	}

	.list {
		overflow: hidden;
		padding: 20rpx 24rpx;

		.select {
			width: 40rpx;
			height: 40rpx;
			margin-right: 24rpx;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.item {
			flex: 1;

			.image {
				width: 176rpx;
				height: 176rpx;
				background: #D8D8D8;
				border-radius: 24rpx;
				overflow: hidden;
				margin-right: 24rpx;

				image {
					width: 176rpx;
					height: 176rpx;
				}
			}

			.content {
				flex: 1;

				.title {
					font-weight: 500;
					font-size: 28rpx;
					color: #131313;
					line-height: 40rpx;
				}

				.grid {
					.grid-item {
						flex: 1;

						text {
							font-size: 24rpx;
							color: #999999;
						}

						.price {
							font-weight: 500;
							font-size: 28rpx;
							color: #FD2A53;
						}

						.order-num {
							font-weight: 500;
							font-size: 28rpx;
							color: #131313;
						}
					}
				}

			}
		}
	}
</style>